<template>
  <div v-if="visible && members.length > 0" class="mention-picker">
    <div
      v-for="(member, index) in filteredMembers"
      :key="member.member_id"
      class="mention-item"
      :class="{ active: index === selectedIndex }"
      @click="selectMember(member)"
      @mouseenter="selectedIndex = index"
    >
      <q-avatar size="32px" class="member-avatar">
        {{ member.name?.[0] || 'U' }}
      </q-avatar>
      <div class="member-info">
        <div class="member-name">{{ member.name }}</div>
        <div v-if="member.alias" class="member-alias">{{ member.alias }}</div>
      </div>
    </div>
    <div v-if="filteredMembers.length === 0" class="mention-empty">
      没有找到匹配的成员
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'

export interface MentionMember {
  member_id: string
  name: string
  alias?: string
}

const props = defineProps<{
  visible: boolean
  members: MentionMember[]
  searchText: string
}>()

const emit = defineEmits<{
  select: [member: MentionMember]
  close: []
}>()

const selectedIndex = ref(0)

const filteredMembers = computed(() => {
  if (!props.searchText) {
    return props.members.slice(0, 10) // 最多显示10个
  }
  
  const search = props.searchText.toLowerCase()
  return props.members
    .filter(m => 
      m.name.toLowerCase().includes(search) ||
      (m.alias && m.alias.toLowerCase().includes(search))
    )
    .slice(0, 10)
})

watch(() => props.visible, (val) => {
  if (val) {
    selectedIndex.value = 0
  }
})

watch(() => props.searchText, () => {
  selectedIndex.value = 0
})

const selectMember = (member: MentionMember) => {
  emit('select', member)
}

// 键盘导航
const handleKeyDown = (event: KeyboardEvent) => {
  if (!props.visible) return
  
  if (event.key === 'ArrowDown') {
    event.preventDefault()
    selectedIndex.value = Math.min(selectedIndex.value + 1, filteredMembers.value.length - 1)
  } else if (event.key === 'ArrowUp') {
    event.preventDefault()
    selectedIndex.value = Math.max(selectedIndex.value - 1, 0)
  } else if (event.key === 'Enter' && filteredMembers.value.length > 0) {
    event.preventDefault()
    selectMember(filteredMembers.value[selectedIndex.value])
  } else if (event.key === 'Escape') {
    event.preventDefault()
    emit('close')
  }
}

// 暴露键盘处理方法
defineExpose({
  handleKeyDown
})
</script>

<style lang="sass" scoped>
.mention-picker
  position: absolute
  bottom: 100%
  left: 0
  margin-bottom: 8px
  background: #FFFFFF
  border: 1px solid rgba(226, 232, 240, 0.8)
  border-radius: 12px
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08)
  max-height: 300px
  overflow-y: auto
  z-index: 1000
  min-width: 200px
  max-width: 300px

.mention-item
  display: flex
  align-items: center
  gap: 12px
  padding: 10px 14px
  cursor: pointer
  transition: background-color 0.15s ease
  border-bottom: 1px solid rgba(241, 245, 249, 0.8)

  &:last-child
    border-bottom: none

  &:hover,
  &.active
    background: rgba(124, 58, 237, 0.08)

.member-avatar
  flex-shrink: 0
  background: #C9C9C9
  color: white
  font-weight: 500
  font-size: 14px
  border: 1px solid #E5E5E5

.member-info
  flex: 1
  min-width: 0
  overflow: hidden

.member-name
  font-size: 14px
  font-weight: 500
  color: #000000
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

.member-alias
  font-size: 12px
  color: #666666
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap
  margin-top: 2px

.mention-empty
  padding: 20px
  text-align: center
  color: #666666
  font-size: 14px

.mention-picker::-webkit-scrollbar
  width: 6px
  height: 6px

.mention-picker::-webkit-scrollbar-track
  background: transparent
  border-radius: 3px

.mention-picker::-webkit-scrollbar-thumb
  background: rgba(0, 0, 0, 0.2)
  border-radius: 3px
  transition: background 0.2s ease

.mention-picker::-webkit-scrollbar-thumb:hover
  background: rgba(0, 0, 0, 0.3)
</style>

